<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <header>
        <nav>
            <div class="logo">
                <img src="./images/logo.png">
            </div>
            <div class="navbar">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">职业规划</a></li>
                </ul>
            </div>

            <!-- 个人中心 -->
            <div class="personal">
                <a href="#">个人中心 <img
                        src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=420327626,720786155&fm=26&gp=0.jpg"
                        alt=""></a>
                <a href="#">
                    <img src="./images/user.jpg" alt="">
                    leilei</a>
            </div>
            
            <div class="search">
                <input type="text">
                <input type="submit" value="">
            </div>

        </nav>
    </header>
    <div class="banner">
        <div class="bannerin container">
            <div class="slidebar">
                <ul>
                    <li><a href="#">前端开发 <span>></span></a></li>
                    <li><a href="#">后端开发 <span>></span></a></li>
                    <li><a href="#">移动开发 <span>></span></a></li>
                    <li><a href="#">android开发 <span>></span></a></li>
                    <li><a href="#">H5开发 <span>></span></a></li>
                    <li><a href="#">ionic开发 <span>></span></a></li>
                    <li><a href="#">react开发 <span>></span></a></li>
                    <li><a href="#">vue开发 <span>></span></a></li>
                    <li><a href="#">angular开发 <span>></span></a></li>
                </ul>
            </div>

            <dl class="kebiao">
                <dt>我的课程表</dt>
                <dd>
                    <h4>继续学习程序设计语言</h4>
                    <p>正在学习-使用对象</p>
                </dd>
                <dd>
                    <h4>继续学习程序设计语言</h4>
                    <p>正在学习-使用对象</p>
                </dd>
                <dd>
                    <h4>继续学习程序设计语言</h4>
                    <p>正在学习-使用对象</p>
                </dd>
                <dd>
                    <a href="#">全部课程</a>
                </dd>
            </dl>

            <ul class="circle">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="recommend container">
        <a href="#">精品推荐</a></a>
        <a href="#">Jquery</a>
        <a href="#">Spart</a>
        <a href="#">Mysql</a>
        <a href="#">JavaWeb</a>
        <a href="#">Mysql</a>
        <a href="#">札幌 </a>
        <a href="#">NBA</a>
    </div>

    <div class="recom-products  container">
        <div class="recom-hd">
            <h4>精品推荐</h4>
            <a href="#">查看全部</a>
        </div>

        <div class="recom-bd clearfix">
            <ul>
                <li>
                    <img src="./images/pic.jpg" alt="">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="./images/pic.jpg" alt="">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>

                <li>
                    <img src="./images/pic.jpg" alt="">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="./images/pic.jpg" alt="">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="./images/pic.jpg" alt="">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="./images/pic.jpg" alt="">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="./images/pic.jpg" alt="">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="./images/pic.jpg" alt="">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="./images/pic.jpg" alt="">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="./images/pic.jpg" alt="">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="footer-in container">
        <div class="f-l">
            <img src="./images/logo.png" alt="">
            <p>欢迎来到学成在线网站，这里将是你学成的地方</p>
            <a href="#">下载APP</a>
        </div>
        <div class="f-r">
            <dl>
                <dt>关于学成网</dt>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
            </dl>

            <dl>
                <dt>关于学成网</dt>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
            </dl>

            <dl>
                <dt>关于学成网</dt>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
                <dd> <a href="#">关于团队</a> </dd>
            </dl>

        </div>
    </div>
</body>

</html>